<template>
	<view class="container">
		<view class="container-c">
			<view class="status">
				等待支付
			</view>
			<view v-if="isObj==false" class="address" @tap="choseAddress">
				去选择收货地址
			</view>
			<view v-else class="myaddress" @tap="choseAddress">
				<text>姓名:{{chosedAddress.name}}</text>
				<text>电话号码:{{chosedAddress.phone}}</text>
				<view class="">
					收货地址:{{chosedAddress.province}}-{{chosedAddress.city}}-{{chosedAddress.region}}{{chosedAddress.detailAddress}}
				</view>
			</view>
			<view class="card">
				<view class="top">
					<text>订单编号:{{orderinfo.orderSn}}</text>
					<text>等待支付</text>
				</view>
				<view class="middle">
					<image class="left" :src="orderinfo.productSkuPic" mode=""></image>
					<view class="right">
						<view class="top-info">
							<text class="name">{{orderinfo.productName}}</text>
							<text class="price">¥{{orderinfo.productPrice}}元</text>
						</view>
						<view class="middle-info">
							<text class="name">编号</text>
							<text class="price">x{{orderinfo.productQuantity}}</text>
						</view>
						<view class="bottom-info" v-for="item in productAttr" :key="item.id">
							规格:{{item.key}}:{{item.value}}
						</view>
					</view>
				</view>
				<view class="bottom">
					<view class="total">
						合计:{{orderinfo.totalPrice}}元
					</view>
					<view class="paybtn" @tap="confirmPay">
						确认付款
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPreOrderById,
		addConfirmOrder
	} from "@/api/list/order/index.js";

	export default {
		data() {
			return {
				orderinfo: {},
				productAttr: [],
				isObj: false,
				chosedAddress: {},
				id: "",
				addressId: "",
				payInfo:{}

			};
		},
		methods: {
			choseAddress() {
				var infoId = uni.getStorageSync("infoId")
				uni.navigateTo({
					url: "/pages/list/address/address?id=" + this.id
				})
			},
			confirmPay() {						
				var obj={			
					  "addressId": this.addressId,
					  "orderId": this.orderinfo.orderId,
					  "orderItemList": [
					    {
					      "cartId": this.orderinfo.cartId,
					      "productId": this.orderinfo.productId,
					      "productQuantity": this.orderinfo.productQuantity,
					      "productSkuId": this.orderinfo.productSkuId,
					    }
					  ],
					  "payType": 0,
					  "sourceType":1				
				}
				addConfirmOrder(obj).then(res => {
					console.log(res)		
					uni.navigateTo({
						url:"/pages/list/order/confirmOrder/confirmOrder?id="+res.data.orderId
					})
					
				})					
				
			}
		},
		onLoad(e) {
			this.addressId = uni.getStorageSync("obj").addressId;
			this.id = e.id
			getPreOrderById(this.id).then(res => {
				console.log(res)
				this.orderinfo = res.data.orderItems[0]
				
				this.productAttr = JSON.parse(res.data.orderItems[0].productAttr);	
			})
			if (uni.getStorageSync("obj")) {
				// console.log(uni.getStorageSync("obj"))
				this.isObj = true;
				this.chosedAddress = uni.getStorageSync("obj")
				// console.log(this.chosedAddress)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		background-color: #f1ece7;
		height: 100vh;
	}

	.container-c {
		width: 614rpx;
		margin: 0 auto;
	}

	.card {
		background-color: #FFFFFF;
		border-radius: 24rpx;
		padding: 36rpx;
		margin-top: 40rpx;

		.top {
			border-bottom: 2rpx solid #f1ece7;
			font-size: 24rpx;
			display: flex;
			justify-content: space-between;
			padding-bottom: 36rpx;
		}

		.middle {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #f1ece7;
			padding-bottom: 36rpx;

			image {
				width: 162rpx;
				height: 162rpx;
			}

			.right {
				width: 350rpx;

				.top-info,
				.middle-info {
					display: flex;
					justify-content: space-between;
				}

				.top-info {
					font-size: 26rpx;
					line-height: 74rpx;
				}

				.middle-info,
				.bottom-info {
					font-size: 24rpx;
					color: #8d8d8d;
				}
			}
		}
	}

	.bottom {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		// justify-content: end;
		.total {
			font-size: 26rpx;
			line-height: 65rpx;

		}

		.paybtn {
			width: 128rpx;
			height: 54rpx;
			border: 2rpx solid #2d4f43;
			border-radius: 10rpx;
			font-size: 26rpx;
			line-height: 54rpx;
			text-align: center;
		}
	}

	.status {
		font-size: 36rpx;
		border-bottom: 2rpx solid #ccc;
		height: 88rpx;
		line-height: 88rpx;
		color: #494949;
	}

	.address {
		font-size: 28rpx;
		border-bottom: 2rpx solid #ccc;
		height: 88rpx;
		line-height: 88rpx;
		color: #494949;
		margin-bottom: 36rpx;
	}

	.myaddress {
		font-size: 28rpx;
		color: #494949;
		border-bottom: 2rpx solid #ccc;
		height: 88rpx;
		padding: 20rpx 0;

	}
</style>
